<template>
	<div class="todo-header">
		<!-- 方法一：通过双向绑定获取输入的内容 -->
	  <input type="text" placeholder="请输入你的任务名称，按回车键确认" 
		    v-model="inputText" @keyup.enter="addTodoFunction" />
	</div>
</template>

<script>
	//npm i nanoid //安装nanoid（uuid的变种，简化了uuid）
	import { nanoid } from 'nanoid';
	export default{
		name:"Myheader",
		data(){
			return {
				inputText: ""
			}
		},
		methods:{
			//方法二：通过addTodo方法中的event参数获取输入的内容
			addTodoFunction(event){
				var title = event.target.value;
				if(title.trim().length <= 0){alert("请输入内容");return}
				var todoObj = {};
				todoObj.title = title;
				todoObj.id = nanoid();
				todoObj.done = false;
				event.target.value = "";
				this.addTodo(todoObj);
			},
		},
		props:["addTodo"]
	}
</script>

<style scoped>
	/*header*/
	.todo-header input {
	  width: 560px;
	  height: 28px;
	  font-size: 14px;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  padding: 4px 7px;
	}
	
	.todo-header input:focus {
	  outline: none;
	  border-color: rgba(82, 168, 236, 0.8);
	  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	}
</style>